<!-- Created by mhy on 2018/6/27.

 -->
<template>
<div class="frame-index">
    <div class="frame-content" v-loading="loading">
        <Upload-img class="up-box" @upload="upload" :src="imgurl" v-loading="loadingImg"/>
        <x-input v-model="factoryName" class="m-mb-30" label="*厂家名称"/>
        <!--<x-input v-model="factoryId" class="m-mb-30" label="*厂家ID号"/>-->
        <x-input v-model="desc" label="备注"/>
        <div class="up-tip">生成后，不可删除</div>
        <button class="up-submit" :disabled="!disabled" @click="submit">提交</button>
        <button class="up-cancel" @click="back">取消</button>
    </div>
  </div>
</template>

<script>

  import {mapActions,mapState} from 'vuex'
    export default {
      data() {
        return{
            loadingImg: false,
            loading: false,
            factoryName: '',
//            factoryId: '',
            desc: '',
            imgurl: ''
        }
      },
      components:{
      },
      methods: {
        ...mapActions([
            'uploadFactoryImage',
            'addNewFactory',
          'getALLFactoryList'
        ]),
        init () {
            this.factoryName = ''
//            this.factoryId = ''
            this.desc = ''
            this.imgurl = ''
        },
        back(){
          this.$router.go(-1)
        },
        upload (e) {
            console.log(e, e.target.files[0].type.indexOf('image'))
            if (e.target.files[0].type.indexOf('image') !== 0) {
                return this.$message({
                    message: '请上传图片',
                    type: 'warning'
                })
            }
            this.loadingImg = true
            let fromdata = new FormData()
            fromdata.append('file', e.target.files[0])
            this.uploadFactoryImage(fromdata)
            .then(data => {
                console.log(data)
                this.imgurl = data.result.url
            })
            .finally(d => {
               this.loadingImg = false
            })
        },
        submit () {
            let jj = JSON.stringify({
//              factoryName: this.factoryName,
              desc: this.desc,
//              imgurl: this.imgurl,
//              createTime: Date.now()
            })
//            jj = JSON.stringify(jj)
            this.loading = true
            this.addNewFactory({
                action: 'add',
//                id: this.factoryId,
                info: jj,
                displayname: this.factoryName,
                icon: this.imgurl,
                createtime: Date.now(),
                name: this.factoryName,
            })
            .then(data => {
              this.getALLFactoryList({page: 1})
                this.$dialog.toast({
                    mes: '新建厂家成功',
                    timeout: 1000,
                    icon: 'success',
                    callback: () => {
//                        this.init()
                      this.$router.go(-1)
                    }
                });
            })
            .finally(d => {
               this.loading = false
            })
        }
      },
      computed: {
        disabled () {
            return this.imgurl && this.factoryName
        }
      },
      mounted (){
        this.$store.state.navTitle = '新建厂家'
          this.init()
      }

    }
</script>

<style scoped lang="scss">
  input{
    background-color: white;
  }
   .frame-index{
      position: relative;
      width: 100%; overflow: hidden;
      background:#F2F2F2;
    }

    .frame-content{
        position: relative;
        width: 710px;
        margin: 0 auto;
    }

    .up-box{
        margin: 100px auto;
    }

    .m-mb-30{
        margin-bottom: 30px;
    }

    .up-tip{
        height:17px;
        font-size:12px;
        color:rgba(48,54,65,1);
        line-height:17px;
        text-align: center;
        margin-top: 61px;
    }

    .up-submit{
        display: block;
        height:50px; width: 100%;
        background:rgba(57,184,102,1);
        border-radius:6px;
        font-size:16px;
        color: #fff;
        text-align: center; line-height: 50px;
        margin-top: 22px;
    }

    button:disabled {
        opacity: .5;
    }

    .up-cancel{
        @extend .up-submit;
        color:rgba(48,54,65,1);
        background: #fff;
        margin-bottom: 90px;
    }

</style>
